.nom-slider {
  .nom-slider-content {
    position: relative;
    height: 12px;
    margin: 10px 6px;
    padding: 4px 0;
    color: rgba(var(--nom-grey-8), 1);
    outline: none;
    cursor: pointer;

    &.nom-slider-content-disabled {
      cursor: not-allowed;

      .nom-slider-track {
        background-color: var(--nom-slider-disabled-color);
      }

      .nom-slider-handle:focus,
      .nom-slider-handle:hover,
      .nom-slider-handle:active {
        border-color: var(--nom-slider-handle-color);
      }
    }

    .nom-slider-rail {
      position: absolute;
      width: 100%;
      height: 4px;
      background-color: var(--nom-slider-rail-color);
      border-radius: 2px;
    }

    .nom-slider-track {
      position: absolute;
      height: 4px;
      background-color: var(--nom-slider-color);
      border-radius: 2px;
    }

    .nom-slider-handle {
      position: absolute;
      width: 1.5rem;
      height: 1.5rem;
      margin-top: -10px;
      background-color: var(--nom-slider-handle-color);
      border-radius: 50%;
      box-shadow: 0 4px 6px rgba(0, 0, 0, .1), 0 0 1px rgba(0, 0, 0, .3);
      transform: translateX(-50%);
    }

    .nom-slider-handle:focus,
    .nom-slider-handle:hover,
    .nom-slider-handle:active {
      border: 2px solid var(--nom-color-primary);
    }
  }
}
